import 'package:extended_text/extended_text.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import 'logic.dart';

// extended_text文档参考：
// https://juejin.cn/post/6844903806098997262
class MessageItemComponent extends StatelessWidget {
  final logic = Get.put(MessageItemLogic());
  int index = 0;
  late final String text;
  late final bool isStart;

  MessageItemComponent(this.index, {Key? key}) : super(key: key) {
    var tempText = "这是文字呀" * (index + 1);
    text = "@一个好人 $tempText";
    isStart = index % 2 == 0;
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: Container(
            margin: EdgeInsets.symmetric(horizontal: 10),
            child: Row(
              textDirection: isStart ? TextDirection.ltr : TextDirection.rtl,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  padding: EdgeInsets.symmetric(horizontal: 10, vertical: 20),
                  color: Colors.red.shade200,
                  child: Text("头像"),
                ),
                Flexible(child: LayoutBuilder(
                  builder: (BuildContext context, BoxConstraints constraints) {
                    return Stack(
                      children: [
                        Container(
                          margin: EdgeInsets.symmetric(horizontal: 10),
                          constraints: BoxConstraints(
                              maxWidth: constraints.maxWidth / 5 * 4),
                          child: Container(
                            padding: EdgeInsets.symmetric(
                                horizontal: 10, vertical: 20),
                            decoration: BoxDecoration(
                                color: Colors.grey.shade200,
                                borderRadius:
                                    BorderRadius.all(Radius.circular(5)),
                                border: Border.all(
                                  color: Colors.grey.shade300,
                                ),
                                boxShadow: [
                                  BoxShadow(
                                    color: Colors.grey.shade200,
                                    offset: Offset(1, 1),
                                    blurRadius: 10,
                                  ),
                                ]),
                            child: ExtendedText(
                              text,
                              softWrap: true,
                            ),
                          ),
                        ),
                        Positioned(
                          top: 20,
                          left: isStart ? 0 : null,
                          right: isStart ? null : 0,
                          child: Container(
                            width: 24,
                            height: 0,
                            decoration: new BoxDecoration(
                              border: Border(
                                // 四个值 top right bottom left
                                top: BorderSide(
                                    color: Colors.transparent,
                                    width: 12,
                                    style: BorderStyle.solid),
                                bottom: BorderSide(
                                    color: Colors.transparent,
                                    width: 12,
                                    style: BorderStyle.solid),
                                right: BorderSide(
                                    color: isStart
                                        ? Colors.transparent
                                        : Colors.grey.shade200,
                                    width: 12,
                                    style: BorderStyle.solid),
                                left: BorderSide(
                                    color: isStart
                                        ? Colors.grey.shade200
                                        : Colors.transparent,
                                    width: 12,
                                    style: BorderStyle.solid),
                              ),
                            ),
                          ),
                        ),
                      ],
                    );
                  },
                )),
              ],
            ),
          ),
        ),
      ],
    );
  }
}
